<template>
	<view>
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view class="top-box" slot="top">
				<view class="box-left">
					<view class="box-num">共{{total}}词</view>
					<view class="box-text">{{name}}</view>
				</view>
				<view class="box-right">
					<u-dropdown>
						<u-dropdown-item v-model="sortValue" title="排序" :options="sortList"
							@change="sortChange"></u-dropdown-item>
					</u-dropdown>
					<view class="sort-text">{{sortText}}</view>
				</view>
			</view>

			<view class="presdete-box word-box-hover" v-for="(item, index) in dataList" :key="index"
				@click.stop="wordClick(index)">
				<!-- <view class="d-s-c ml30 presdete-box-item" @click.stop="wordDetail(item.word_id)">
					<wordTip class="tip" :item="item"  ></wordTip>
					<view :class="['pinlv',item.frequency]" @click.stop="wordDetail(item.word_id)">
						<view class="text">
							<text v-if="item.isGK==1">高</text>
							<text v-else>中</text>
						</view>
						<view class="num">
							<text v-if="item.isGK==1">{{item.gk_cs}}</text>
							<text v-else>{{item.zk_cs}}</text>
						</view>
					</view>
				</view> -->
				<view class="presdete_top_item d-s-c">
					<view class="flex-1 d-s-c">
						<!-- <view class="index">{{index + 1}}</view> -->
						<view class="flex-1 d-s-c">
							<wordTip class="tip" :item="item"></wordTip>
							<view class="word f48 fb mr40">{{item.word}}</view>
							<view class="chinese f36 fb mr40">
								<view v-if="(currentIndex==index && clickTimes==2) || item.check">{{item.chinese}}
								</view>
							</view>
						</view>
					</view>
					<view class="d-e-c">
						<view class="presdete_top_item_box1 d-c-c mr20" :class="{'checked':item.check==1}"
							@click.stop="wordCheck(index, 1)">
							<u-icon name="checkmark" color="#fff" size="36"></u-icon>
						</view>
						<view class="presdete_top_item_box2 d-c-c" :class="{'checked':item.check==2}"
							@click.stop="wordCheck(index, 2)">
							<u-icon name="close" color="#fff" size="36"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="presdete-bot d-b-c tc" slot="bottom">
				<view class="d-s-c f32">
					已选<view style="color: #7BD42B;">{{count}}</view>个
				</view>
				<view class="flex-1 d-e-c">
					<view :class="['presdete-bot-button','btn1',{'checked':wordPageSize==5}]" @click="wordPageSize=5">
						选择5个</view>
					<view :class="['presdete-bot-button','btn1',{'checked':wordPageSize==15}]" @click="wordPageSize=15">
						选择15个</view>
					<view class="presdete-bot-button btn2" @tap="startCheck">开始识记</view>
				</view>
			</view>
		</z-paging>
		<studyBeforeVue 
			v-model="popupShow" 
			:wordData="popupData" 
			:comment="popupComment" 
			@addWord="addWord" 
			@startStudy="startStudy"
		></studyBeforeVue>
	</view>
</template>

<script>
	import studyBeforeVue from '../components/studyBefore/studyBefore.vue'
	import wordTip from '@/pages/components/wordTootip.vue'
	export default {
		components: {
			wordTip,
			studyBeforeVue
		},
		data() {
			return {
				bookId: 0,
				unitId: 0,
				total: 0,
				name: '',
				sortText: '高频优先',
				sortValue: 'frequency',
				sortList: [
					{label: '高频优先', value: 'frequency'},
					{label: '默认排序', value: 'default'}
				],
				count: 0,
				wordPageSize: 5,
				ids: '',
				knowIds: '',
				dataList: [],
				currentIndex: -1,
				clickTimes: 0,
				checkedList: [],
				bookVersion: 'XX',
				popupShow: false,
				popupData: {
					totalNum: 0,
					trueNum: 0,
					falseNum: 0,
				},
				popupComment: '',
			}
		},
		onLoad(options) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			} else {
				this.bookId = options.bookId || 0
				this.unitId = options.unitId || 0
				this.getBookVersion()
			}
		},
		methods: {
			// 获取教材版本
			getBookVersion() {
				this.$u.post(this.$u.api.bookVersion, {
					bookId: this.bookId,
				}).then((res) => {
					this.bookVersion = res.data.grade_type
				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取单词列表
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.userWordList, {
					pageNo: pageNo,
					pageSize: pageSize,
					bookId: this.bookId,
					unitId: this.unitId,
					sort: this.sortValue,
					voiceType: this.$store.state.voiceType,
				}).then((res) => {
					if (res.code == 1) {
						this.name = res.data.name
						let list = res.data.list
						list.data.forEach((item, index) => {
							item.show = false
						})
						this.total = list.total
						for (let i = 0; i < list.data.length; i++) {
							list.data[i].show = false
							list.data[i].check = 0
						}
						this.$refs.paging.complete(list.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((err) => {
					this.$refs.paging.complete(false)
				})
			},
			sortChange(e) {
				this.sortValue = e
				this.sortList.forEach((item) => {
					if (item.value == e) {
						this.sortText = item.label
					}
				})
				this.$refs.paging.refresh()
			},
			wordDetail(id) {
				uni.navigateTo({
					url: '/pages/study/word/detail?wordId=' + id
				})
			},
			// 点击单词
			wordClick(i) {
				if (this.currentIndex == i) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = i
				// this.list[i].show = true

				let audio = this.dataList[i].audio_url
				this.playAudio(audio)
			},
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			// 选择单词
			wordCheck(i, n) {
				if (this.dataList[i].check == n) {
					this.dataList[i].check = 0
				} else {
					this.dataList[i].check = n
					if (i < this.dataList.length - 1) {
						let audio = this.dataList[i].audio_url
						this.playAudio(audio)
					}
				}
				let count = 0
				let idArray = []
				let knowIdArray = []
				for (let j = 0; j < this.dataList.length; j++) {
					let words = this.dataList[j]
					if (words.check == 1) {
						knowIdArray.push(words.word_id)
					}
					if (words.check == 2) {
						count += 1
						idArray.push(words.word_id)
					}
				}
				this.count = count
				this.ids = idArray.join(',')
				this.knowIds = knowIdArray.join(',')
			},
			startCheck() {
				if (this.count == 0 || this.ids == '') {
					uni.$u.toast('请选择需要识记的单词')
					return false
				}
				this.popupData.totalNum = this.total
				this.popupData.trueNum = this.knowIds.split(',').length
				this.popupData.falseNum = this.ids.split(',').length
				const commonData = this.$store.state.commonData
				const studyBeforeData = commonData.study_before_popup_json[this.bookVersion]
				const index = Math.floor(Math.random() * studyBeforeData.length)
				let comment = studyBeforeData[index]
				this.popupComment = comment.replace("{{totalCount}}", this.popupData.totalNum).replace("{{knownCount}}", this.popupData.trueNum).replace("{{newCount}}", this.popupData.falseNum)
				this.popupShow = true
			},
			// 添加单词
			addWord() {
				this.popupShow = false
			},
			// 开始识记
			startStudy() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post(this.$u.api.addStudy, {
					bookId: this.bookId,
					unitId: this.unitId,
					wordIds: this.ids,
					wordTotal: this.count,
					knowWordIds: this.knowIds,
					pageSize: this.wordPageSize,
				}).then((res) => {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/study/word/word?studyId=' + res.data
					})
				}).catch((res) => {
					uni.hideLoading()
					console.log(res)
					uni.$u.toast(res.data.msg)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #EFFBFF;
	}

	.top-box {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666666;

		.box-left {
			display: flex;

			.box-text {
				width: 280rpx;
				height: 40rpx;
				margin-left: 40rpx;
				overflow: hidden;
			}
		}

		.box-right {
			display: flex;
			align-items: center;

			.sort-text {
				margin-left: 20rpx;
			}
		}
	}

	::v-deep .u-dropdown {
		width: 180rpx;

		.u-dropdown__menu__item__text {
			font-size: 24rpx !important;
		}

		.u-cell {
			padding: 10rpx 20rpx;

			.u-cell_title {
				font-size: 24rpx !important;
			}
		}

		.u-dropdown__content__mask {
			background: transparent !important;
		}
	}

	.presdete-box {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		padding: 25rpx 20rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.presdete-box-item {
			width: 200rpx;
		}

		.tip {
			margin-left: 20rpx;
		}

		.pinlv {
			min-width: 100rpx;
			height: 50rpx;
			margin-left: 20rpx;
			padding: 0 16rpx;
			border-radius: 25rpx;
			background: rgba(112, 218, 17, 0.2);
			border: 1rpx solid #70DA11;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				background-color: #70DA11;
				border-radius: 10rpx;
				box-sizing: border-box;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 28rpx;
			}

			.num {
				font-size: 24rpx;
				color: #70DA11;
			}

			&.high {
				background: rgba(255, 22, 93, 0.2) !important;
				border-color: #FF165D !important;

				.text {
					background-color: #FF165D !important;
				}

				.num {
					color: #FF165D !important;
				}
			}

			&.middle {
				background: rgba(75, 176, 255, 0.2) !important;
				border-color: #4BB0FF !important;

				.text {
					background-color: #4BB0FF !important;
				}

				.num {
					color: #4BB0FF !important;
				}
			}

			&.low {
				background: rgba(112, 218, 17, 0.2) !important;
				border-color: #70DA11 !important;

				.text {
					background-color: #70DA11 !important;
				}

				.num {
					color: #70DA11 !important;
				}
			}

			&.base {
				background: rgba(139, 43, 212, 0.2) !important;
				border-color: #8B2BD4 !important;

				.text {
					background-color: #8B2BD4 !important;
				}

				.num {
					color: #8B2BD4 !important;
				}
			}
		}


	}

	.presdete_top_item {
		width: 100%;

		.index {
			font-weight: bold;
			font-size: 28rpx;
			color: #D0D0D0;
			margin-top: 8rpx;
			width: 60rpx !important;
		}

		.word {
			color: #000000;
		}

		.chinese {
			color: #999999;
		}
	}

	.presdete_top_item_box1,
	.presdete_top_item_box2 {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		background: linear-gradient(250deg, #999999, #C8C4C4);
	}

	.presdete_top_item_box1.checked {
		background-color: #02e411;
	}

	.presdete_top_item_box2.checked {
		background-color: #f50735;
	}

	.presdete-bot {
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;

		.presdete-bot-button {
			width: 162rpx;
			height: 74rpx;
			margin-left: 20rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #FFFFFF;
			font-weight: 400;
			text-align: center;
			line-height: 74rpx;
		}

		.btn1 {
			background-color: #F3F4F6;
			color: #FFA726;

			&.checked {
				background-color: #FFA726 !important;
				color: #FFFFFF !important;
			}
		}

		.btn2 {
			background-color: #0B99FE !important;
		}
	}
</style>